<template>
	<view class="indexContainer">
		<!-- 头部---搜索区域 -->
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuotianchong"></text>
				<input type="text" placeholder="搜索...." placeholder-class="placeholder" />
			</view>
			<button type="default">登录</button>
		</view>

		<!-- 脖子---滑块区域 -->
		<scroll-view class="navScroll" scroll-x="true" v-if="indexData.kingKongModule">
			<view class="navItem" :class="{ active: navIndex === -1 }" @click="changeIndex(-1, 0)">推荐</view>
			<view
				class="navItem"
				:class="{ active: navIndex === index }"
				v-for="(item, index) in indexData.kingKongModule.kingKongList"
				:key="item.L1Id"
				@click="changeIndex(index, item.L1Id)"
			>
				{{ item.text }}
			</view>
		</scroll-view>

		<!-- 内容区 -->
		<scroll-view scroll-y="true">
			<!-- 滑块---推荐  公共组件 -->
			<Recommend v-if="navIndex === -1" />
			<!-- 滑块---推荐右边  公共组件 -->
			<CartList v-else :L1Id="L1Id" />
		</scroll-view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
// 引入公共组件Recommend
import Recommend from '../../components/Recommend/Recommend.vue';
// 引入组件CartList
import CartList from '../../components/CartList/CartList.vue';
// vuex
import { mapActions, mapState } from 'vuex';
export default {
	name: 'index',
	components: {
		Recommend,
		CartList
	},
	data() {
		return {
			// indexData: {},
			// 高亮标记
			navIndex: -1,
			// 滑块的唯一标识L1Id
			L1Id: 0
		};
	},
	// 计算属性 mapState将vuex中state的数据映射成计算属性
	computed: {
		// ...mapState('模块', ['数值'])
		// ...mapState('home', ['indexData'])
		...mapState({
			indexData: (state) => state.home.indexData
		})
	},
	onLoad() {},
	created() {
		// this.getIndexData();

		// 获取仓库里的测试数据
		console.log(this.$store.state.home.test);

		// 触发action this.$store.dispatch('模块名/action名')
		// this.$store.dispatch('home/getIndexDataActions');
		// 触发action
		this.getIndexDataActions();
	},
	methods: {
		...mapActions('home', ['getIndexDataActions']),
		// 获取首页滑块部分数据
		async getIndexData() {
			// PC端需要跨域的请求写法
			// const res = await request('/api/getIndexData');
			const res = await request('/getIndexData');
			this.indexData = res.data;
			console.log(res);
		},
		// 点进切换滑块下标
		changeIndex(index, L1Id) {
			this.navIndex = index;
			// console.log(L1Id);
			this.L1Id = L1Id;
		}
	}
};
</script>

<style lang="stylus">
.indexContainer
	.header
		display flex
		padding 10rpx 5rpx
		.logo
			width 140rpx
			height 40rpx
			margin 10rpx
		.search
			width 420rpx
			height 60rpx
			background #f5f5f5
			margin-left 10rpx
			position relative
			input
				width 360rpx
				height 60rpx
				// border 1rpx solid #ccc
				margin-left 60rpx
				.placeholder
					font-size 26rpx
					color #000
			.iconfont
				position absolute
				font-size 40rpx
				left 10rpx
				top 10rpx
		button
			width 144rpx
			height 60rpx
			line-height 60rpx
			text-align center
			font-size 26rpx
			padding 0 4rpx

	.navScroll
		// 不换行
		white-space nowrap
		.navItem
			display inline-block
			height 40rpx
			padding 10rpx
			font-size 28rpx
			&.active
				border-bottom 3rpx solid #BB2C08
				color #BB2C08
	.geli
		color red
</style>
